<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>defineProperty双向数据绑定和响应式原理</title>
</head>
<body>
  <input id="input-1" placeholder="文本框的值"/>
  <input id="input-2" placeholder="data的数据" />
  <script>
    // 双向数据绑定
    const data = {}
    const input = document.getElementById("input-1")
    const input_1 = document.getElementById("input-2")
    Object.defineProperty(data, 'text', {
      set (value) {
        input.value = value
        this.value = value
      },
      get () {
        return this.value
      }
    })
    input.oninput = function (e) {
      data.text = e.target.value
      input_1.value = data.text
    }
    input_1.oninput = function (e) {
      data.text = e.target.value
    }
    
    // vue2.X是使用了defineProperty完成的数据绑定
    // 但是使用该方法进行绑定会有缺陷，比如对数组的元素进行操作，对对象的属性进行操作，都不会触发数据更新
    // 因为defineProperty中的set只能监听到数组或者对象的地址变化，因此对于一些元素和属性的操作不会触发set的数据更新
    // vue中可以使用数组的一些变异方法进行set的数据更新
    // vue中对Array.prototype的一些方法进行了重写（push, pop, shift, unshift, sort, splice, reverse），使用该方法后会返回一个新的
    // 数组，以此来触发set的数据更新

    // es6中的proxy用来数据监听是一种更好的方法
    // proxy能够监听数组和对象，当元素和属性发生变化时会被proxy给间听到

    // 最后附上关于相关资料的连接:https://segmentfault.com/a/1190000015483195?utm_source
  </script>
</body>
</html>